<template>
    <el-aside :class="{'nav-bar':true,'nav-bar-xs':Collapse}">
        <el-menu class="el-menu-vertical-demo" default-active="1" :unique-opened="uniqueOpened" :collapse-transition="true"  @open="handleOpen" @close="handleClose" background-color="#393e48" text-color="#fff" active-text-color="#ffd04b" :collapse="Collapse">
            <!-- band标志 -->
            <el-menu-item index="1" class="nav-band">
                <img src="../assets/logoNo.png" alt="公司标志">
                <span slot="title">Locker Expert</span>
            </el-menu-item>
            <router-link :to="{path:i.path}" v-for="(i,index) in navList" :key="i.name">
                <el-menu-item :index="String(index+1)">
                    <i :class="i.icon"></i>
                    <span slot="title">{{i.name}}</span>
                </el-menu-item>
            </router-link>
        </el-menu>
    </el-aside>
</template>

<script>
export default {
    data(){
      return {
        client:JSON.parse(sessionStorage.getItem('user')),
        uniqueOpened:true,
        navList:[
            {name:'场馆管理',path:'/GymManage',icon:'fa-cubes  fa'},
            {name:'管理员',path:'/UserManage',icon:'fa-user-o fa'},
            {name:'场馆功能管理',path:'/ViewManage',icon:'fa-cog fa'}
        ]
      };
    },
    props:['Collapse'],
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
    .nav-bar{
        width:200px !important;
        transition:width .3s;
        transition-timing-function:ease-in-out;
        position: fixed; 
        top: 0px;
        bottom: 0px; 
        /* background-color: #495060; */
        background-color: #393e48;
        overflow-x: hidden;
    }
    .nav-bar-xs{
        width:64px !important;
    }
    .nav-bar::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .nav-bar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .nav-bar::-webkit-scrollbar-track {/*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: rgb(36, 35, 35);
    }
    .el-menu-item i[class^=fa-],.el-submenu i[class^=fa-]{
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }
    .nav-band{
        height:59px;
        border-bottom:1px solid rgba(0, 0, 0, 0.5);
        font-weight:600;
        font-size:15px;       
    }
    .nav-band img{
        width:35px;height:30px;
    }
    .nav-band span{
        color: #b0acac;
    }
</style>

